<template>
  <div ref="target">
    <!-- 存放异步加载组件 -->
    <slot v-if="show"></slot>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useIntersectionObserver } from "@vueuse/core";

//加载时切换显示
const show = ref(false);
//获取加载组件
const target = ref(null);
onMounted(() => {
  setTimeout(() => {
    useIntersectionObserver(target, ([{ isIntersecting }]) => {
      if (isIntersecting) {
        show.value = true;
      }
    });
  }, 400);
});
</script>
